<!-- 用户列表-->

<template>
    <div class="wrapper">
        <!-- 报表标题组件-->
        <ReportTitle :titleInfo="titleInfo" @handleAdd="handleAdd" :isExport="false" :isAdd="true"/>
        <!-- 报表检索条件组件 -->
        <ReportSearch :loading="loading" :searchFormDatas="searchFormDatas" v-model:searchForm="searchForm"
            @handleSearchForm="handleSearchForm" @handleResetForm="handleResetForm" />
        <!-- 报表表格组件-->
        <ReportTable :loading="loading" :showSummary="false" :tableData="tableData" :pageInfo="pageInfo"
            :summaryData="summaryData" :tableColumnData="tableColumnData" :tableColumnWidthData="tableColumnWidthData">
            <template #link>
                <el-table-column :resizable="false" label="角色名称" width="160" >
    				<template #default="scope">
    					<span class="operateBtn" @click="handlePreview(scope.row)">{{ scope.row.roleName || '--' }}</span>
    				</template>
    			</el-table-column>
            </template>
            <el-table-column :resizable="false" label="操作" width="160">
				<template #default="scope">
					<span class="operateBtn" @click="handleEdit(scope.row)">修改</span>
					<span class="operateBtn" @click="handleDelete(scope.row)">删除</span>
				</template>
			</el-table-column>
        </ReportTable>
        <!-- 报表表格分页组件-->
        <ReportTablePage v-model:pageInfo="pageInfo" @handleSearchForm="handleSearchForm" />
        <!-- 删除对话框 -->
        <template v-if="dialogVisible">
            <Dialog v-model:dialogVisible="dialogVisible" @deleteTarget="deleteTarget">
                <div class="item">
                    <i class="t-icon t-icon-tishi ticon"></i>
                    <span>确定删除该角色？</span>
                </div>
            </Dialog>
        </template>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

import ReportTitle from '@/components/reportTitle/index.vue';
import ReportSearch from '@/components/reportSearch/index.vue';
import ReportTable from '@/components/reportTable/index.vue';
import ReportTablePage from '@/components/reportTablePage/index.vue';
import Dialog from '@/components/elements/Dialog.vue';

import * as server from '@/api/modules/systemManage';

import { apiFn, deepCopy } from '@/utils/utilFns';

const emit = defineEmits(['updateRoleInfo']);

// 报表标题信息
const titleInfo = reactive({
    title: '角色列表',
    description: ""
});

// 默认表单数据
const defaultSearchForm = {
	roleName: ""
};

// 汇总数据
const summaryData = ref({});

// 默认分页数据
const defaultPageInfo = {
    currentPage: 1,
    pageSize: 20,
    total: 0
};

// 加载状态
const loading = ref(false);
const dialogVisible = ref(false);
const operateData = ref({});

// 表格数据
const tableData = ref([]);

// 表头宽度数据
const tableColumnWidthData = {};

// 表头数据
const tableColumnData = ref([
    {
        prop: 'remark',
        label: '备注信息',
        showTip: true
    },
    {
        prop: 'createTimeStr',
        label: '创建时间',
    }
]);

// 检索条件数据
const searchFormDatas = ref([
    {
        id: 4,
        type: 'input',
        prop: 'roleName',
        label: '角色名称',
        options: [],
        api: () => { },
        placeholder: '请输入角色名称',
    }
]);

// 表单数据
const searchForm = reactive(deepCopy(defaultSearchForm));

// 分页数据
const pageInfo = reactive(deepCopy(defaultPageInfo));

onMounted(() => {
    getTableList();
});

// 获取查询参数
const getParams = () => {
    const { roleName } = searchForm;
    const { pageSize, currentPage } = pageInfo;

    const params = {
        like: {
			roleName
		},
        limit: pageSize,
        page: currentPage,
    };

    return params;
};

// 获取报表列表内容
const getTableList = () => {
    const params = getParams();
    loading.value = true;
    apiFn(server.getRoleList, params)
        .then(res => {
            const { code, data, recordsTotal } = res;
            if (code === '200') {
                if (data.length > 0) {
                    tableData.value = data;
                } else {
                    tableData.value = [];
                }

                pageInfo.total = recordsTotal;
            }
        }).catch(() => {
            tableData.value = [];
            pageInfo.total = 0;
        }).finally(() => {
            loading.value = false;
        })
};

// 新增
const handleAdd = () => {
    emit('updateRoleInfo', { type: 'add', roleInfo: {}})
};

// 预览
const handlePreview = (rowData) => {
    operateData.value = rowData;
    emit('updateRoleInfo', { type: 'preview', roleInfo: rowData })
};

// 编辑
const handleEdit = (rowData) => {
    operateData.value = rowData;
    emit('updateRoleInfo', { type: 'edit', roleInfo: rowData })
};

// 删除
const handleDelete = (rowData) => {
    dialogVisible.value = true;
    operateData.value = rowData;
};  

// 删除目标
const deleteTarget = () => {
    const { id } = operateData.value;
    const params = {
        id 
    };
    
    apiFn(server.deleteUser, params)
        .then(res => {
            const { code } = res; 
            if (code === '200') {
                ElMessage.success('删除成功!');
                getTableList();
            }
        }).catch(() => {
            ElMessage.success('删除失败!');
        }).finally(() => {
            dialogVisible.value = false;
        })
};

// 查询
const handleSearchForm = (type) => {
    if (loading.value) return;

    if (type === 'search') {
        Object.keys(defaultPageInfo).forEach(key => {
            if (key in pageInfo) {
                pageInfo[key] = defaultPageInfo[key];
            }
        })
    }
    getTableList();
};

// 重置
const handleResetForm = () => {
    Object.keys(searchForm).forEach(key => {
        if (key in defaultSearchForm) {
            searchForm[key] = defaultSearchForm[key];
        }
    });

    Object.keys(defaultPageInfo).forEach(key => {
        if (key in pageInfo) {
            pageInfo[key] = defaultPageInfo[key];
        }
    });
    // tableData.value = [];
    handleSearchForm('search')
};
</script>

<style lang="scss" scoped></style>